<template>
	<div class="hospital">
		<el-row>
			<el-col :span="10">
				<el-autocomplete v-model="search" :fetch-suggestions="querySearchAsync" placeholder="请输入医院名称" style="width: 300px"
					@select="handleSelect" />
			</el-col>
			<el-col :span="2">
				<el-button type="primary" @click="getList">查询</el-button>
			</el-col>
			<el-col :span="2">
				<el-button type="reset" @click="search = ''">重置</el-button>
			</el-col>
		</el-row>
		<el-table border :data="tableData.slice((pageNum-1)*10, pageNum*10)" style="width:100%;margin-top: 20px;">
			<el-table-column prop="id" label="序号">
			</el-table-column>
			<el-table-column prop="name" label="医院名">
			</el-table-column>
			<el-table-column prop="type" label="类型">
			</el-table-column>
		</el-table>
		<el-pagination style="margin-top: 20px; float: right;" background :pageSize="10" layout="total, prev, pager, next"
			:current-page="pageNum" @current-change="pageChange" :total="tableData.length">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		name: 'HospitalVerify',
		data() {
			return {
				search: '',
				tableData: [],
				pageNum: 1,
				timeout: null
			}
		},
		methods: {
			pageChange(pageNum) {
				this.pageNum = pageNum
			},
			getList() {
				this.$axios.get("/hospital/getList?name=" + this.search.trim()).then(res => {
					this.pageNum = 1;
					this.tableData = res.data;
				})
			},
			querySearchAsync(queryString, cb) {
				this.$axios.get("/hospital/getNameList?name=" + queryString.trim()).then(res => {
					if (res.data && res.data.length > 0) {
						cb(res.data)
					}
				})
			},
			handleSelect() {
				this.getList()
			}
		}
	}
</script>

<style>
	.hospital {
		width: 1000px;
		margin: 100px auto;
		padding: 20px;
		padding-bottom: 50rem;
		background-color: #fff;
	}
	body {
		background: #1d91e4;
	}
</style>
